ES6 新特性介紹

ES6（也稱為 ECMAScript 2015）是 JavaScript 的一次重大更新，是 ES5（ECMAScript 2009）之後的下一個主要版本。它引入了許多新的語法和功能，使 JavaScript 更加強大與現代化。以下是 ES6 相對於 ES5 的一些主要改進和新增功能：

✅ 1. `let` 和 `const` 聲明變量

ES5 只能使用 `var`，而 ES6 引入了更有意義的變量聲明方式：

let x = 10;     // 可重新賦值，區塊作用域
const y = 20;   // 常數，不可重新賦值，區塊作用域

✅ 2. 箭頭函數（Arrow Functions）

箭頭函數語法更簡潔，並且綁定 `this` 的方式不一樣：

// ES5
var add = function(a, b) {
  return a + b;
};

// ES6
const add = (a, b) => a + b;

✅ 3. 模板字串（Template Literals）

使用反引號 `` ` `` 和 `${}` 插入變量或表達式：

let name = 'Alice';
let greeting = `Hello, ${name}!`;

✅ 4. 解構賦值（Destructuring Assignment）

可快速從陣列或物件中提取值：

// 陣列
let [a, b] = [1, 2];

// 物件
let {name, age} = {name: 'Bob', age: 30};

✅ 5. 展開運算子（Spread & Rest）

// 展開
let arr = [1, 2];
let newArr = [...arr, 3, 4]; // [1, 2, 3, 4]

// 收集（Rest）
function sum(...nums) {
  return nums.reduce((a, b) => a + b, 0);
}

✅ 6. 類（Classes）

ES6 提供了更接近傳統 OOP 語言的類語法：

class Person {
  constructor(name) {
    this.name = name;
  }

  greet() {
    console.log(`Hello, I'm ${this.name}`);
  }
}

✅ 7. 模組（Modules）

支援 `import` 和 `export`，實現模組化程式設計：

// module.js
export const pi = 3.14;

// main.js
import { pi } from './module.js';

✅ 8. Promise（承諾）

用來處理非同步操作，替代回呼地獄（callback hell）：

const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve('Data loaded'), 1000);
  });
};

fetchData().then(data => console.log(data));

✅ 9. for...of 迴圈

可遍歷可迭代對象（如陣列）：

let arr = [10, 20, 30];
for (let value of arr) {
  console.log(value);
}

✅ 10. Symbols 類型

新增的原始資料型別，用於建立獨一無二的值：

let sym = Symbol('id');

✅ 11. Map 和 Set

新的資料結構：

let set = new Set([1, 2, 3]);
let map = new Map([['key', 'value']]);

總結表

功能	ES5	ES6
`let` / `const`	❌	✅
箭頭函數	❌	✅
模板字串	❌	✅
解構賦值	❌	✅
模組化	❌	✅
Promise	❌	✅
Class 類別	❌	✅